<template>
	<view>
		<view class="topnav">
			<van-nav-bar
			  title="历史订单"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</view>
		<van-tabs v-model="activeName" @change="onChange">
		  <van-tab :title="item.title" :name="item.type" v-for="item in orderList" :key="item.id">
				
		<!-- 订单列表 -->
			<view class="box">
				<scroll-view class="orderlist" scroll-y="true" show-scrollbar="false">
					<view class="order" v-for="item in order" :key="item.oid">
						<view class="top">
							<text>订单编号:{{item.oid}}</text>
							<text class="state">已完成</text>
						</view>
						<view class="shop">
							<image :src="item.shop.imgUrl" mode=""></image>
							<view class="info">
								<text>{{item.shop.sname}}</text>
								<text>{{item.size}}</text>
								<text>¥{{item.shop.sprice}} X {{item.sum}}</text>
							</view>
						</view>
						<view class="price">
							<text>商品总价：</text><text>¥{{item.shop.sprice * item.sum}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		  </van-tab>
		</van-tabs>
		
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import {getOrderList} from '../../request/api.js'
	export default {
		data() {
			return {
				activeName:'a',
				orderList:[],
				orderShop:[],
				order:[]
			}
		},
		methods: {
			onClickLeft(){
				
			},
			loadOrderNav(){
				getOrderList().then(res=>{
					this.orderList = res.data
				})
			},
			onChange(e){
				if(this.orderShop.length>0){
					if(e =='0'){
						this.order = this.orderShop
						// console.log(this.orderShop);
					}else {
						this.order = this.orderShop.filter(item =>{
							return item.orderstate == e
						})
					}
				}else{
					return this.$notify('你还没有订单呢!')
				}
			}
		},
			
		onLoad(){
			this.loadOrderNav()
			this.orderShop = store.state.orderList
			this.order = this.orderShop
		}
		
	}
</script>

<style lang="less">
page{
	background-color: #f3f3f3;
}
.topnav{
	border-bottom: 1rpx solid #ccc;
}
.van-tabs__nav .van-tabs__line{
	background-color: #085710 !important;
}

.orderlist{
	min-height: 88vh;
	// background-color: pink; 
	box-sizing: border-box;
	padding: 40rpx 50rpx;
	.order{
		margin-bottom: 20rpx;
		width: 100%;
		height: 300rpx;
		background-color: white;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		font-size: 0.8rem;
		.top{
			display: flex;
			justify-content: space-between;
		}
		.top text:nth-child(2) {
			color:#ff4600;
		}
		.shop{
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #ccc;
			image{
				width: 145rpx;
				height: 145rpx;
			}
			.info{
				width: 67%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			.info text:first-child{
				overflow: hiddden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.info text:last-child{
				font-size: 1.1rem;
				color: #085710;
			}
		}
		.price{
			margin-top: 18rpx;
		}
		.price text:last-child{
			font-size: 1.1rem;
			color: #085710;
		}
	}
}
</style>
